<template>
    <div class='search'>
        <search-box @click="searchSong" :isshow.sync="show"></search-box>
        <div v-show="show">
            <van-grid direction="horizontal" :border="false">
                <van-grid-item icon="contact" text="歌手" />
                <van-grid-item icon="contact" text="歌手" />
                <van-grid-item icon="contact" text="歌手" />
                <van-grid-item icon="contact" text="歌手" />
            </van-grid>

            <notes :icon="'delete-o'" :title="'搜索历史'" :btndata="his"></notes>
            <!-- <notes :icon="'delete-o'" :title="'猜你想要'" :btndata="his"></notes> -->
            <diamond></diamond>
        </div>
        <div v-show="!show">
            <search-result :searchList="searchList"></search-result>
        </div>
    </div>
</template>

<script>
import notes from '@/components/History/index.vue'
import diamond from '@/components/diamond/index.vue'
import SearchBox from '@/components/public/SearchBox.vue'
import SearchResult from './SearchResult.vue'

export default {
    name: 'search',
    data() {
        return {
            value: '',
            searchList: [],
            show: true,
            his: []
        }
    },
    computed: {},
    components: {
        notes,
        diamond,
        SearchBox,
        SearchResult
    },
    created() { },
    beforeMount() {
        this.his = JSON.parse(localStorage.getItem('Searchhistory'))
    },
    mounted() { },
    methods: {
        searchSong(v) {
            this.searchList = v
            this.show = false
        }

    },
}
</script>
<style scoped>
.search {
    background: #efefef;
    /* height: 100vh; */
    padding-bottom: 20px;
}

.van-nav-bar {
    background: #eee;
}

.van-search {
    background: #eee;
}

::v-deep .van-grid-item__content {
    background: #eee;
}
</style>
